<template>
  <div class="preview-csv">
    <input type="file" ref="upload-csv" accept=".csv" />
    <el-button type="primary" @click="handleClick">Read CSV</el-button>
  </div>
</template>
<script>
import Papa from "papaparse";
const jschardet = require("jschardet");
export default {
  data() {
    return {
      csv: [
        ["a", "b", "c"],
        [1, 2, 3],
        [4, 5, 6]
      ],
      encoding: ""
    };
  },
  mounted() {
    // Heiho(this.csv);
  },
  methods: {
    handleClick() {
      // 若文件要从后台获取，将事件监听换成 调用后台接口的操作即可；
      const that = this;
      const file = that.$refs["upload-csv"].files[0];
      const fReader = new FileReader();
      fReader.readAsDataURL(file);
      fReader.onload = function(evt) {
        const data = evt.target.result;
        that.encoding = that.checkEncoding(data);
        that.parseCsvFile(file);
      };
    },
    parseCsvFile(file) {
      //引入Papaparse.js，将数据转换成二维数组
      Papa.parse(file, {
        encoding: this.encoding,
        complete: function(results) {
          const arrs = results.data;
          // 去除最后的空行
          const lastItem = arrs[arrs.length - 1].every(val => val === "");
          lastItem && arrs.pop();
          // 通过heiho.js预览csv:https://github.com/kktsvetkov/heiho
          Heiho(arrs);
        }
      });
    },
    checkEncoding(base64Str) {
      // 要用二进制格式
      const str = atob(base64Str.split(";base64,")[1]);
      let encoding = jschardet.detect(str).encoding;
      encoding === "windows-1252" && (encoding = "ANSI"); // 有时会识别错误（如UTF8的中文二字）若这里中文还是出现了乱码问题，可将encoding设置为gb18030（全称： 信息技术 中文编码字符集）
      return encoding;
    }
  }
};
</script>

